<template>
    <div>
        <ul class="nav">
            <li v-for="item in nav" @click="selectNav(item.title)">
                <img :src="isSelect===item.title ?item.url_one:item.url" alt="" class="inde">
                <p :class="isSelect===item.title?'active':''">{{item.title}}</p>
            <router-link to="/"></router-link></li>
        </ul>
    </div>
</template>
<script>
import home from '../assets/home.png'
import home2 from '../assets/home1.png'
export default {
    data() {
        return {
            isSelect:'首页',
            nav:[
                {title:'首页',url:require('../assets/home.png'),url_one:require('../assets/home1.png')},
                {title:'分类',url:require('../assets/search.png'),url_one:require('../assets/search2.png')},
                {title:'消息',url:require('../assets/zx.png'),url_one:require('../assets/zx2.png')},
                {title:'购物袋',url:require('../assets/car.png'),url_one:require('../assets/car2.png')},
                {title:'我的',url:require('../assets/me.png'),url_one:require('../assets/me2.png')},
            ]
        }
    },
    methods: {
        selectNav(title){
            this.isSelect=title
            switch(title){
                case'首页':this.$router.push('/')
                break
                case'分类':this.$router.push('/product')
                break
                case'消息':this.$router.push('/login')
                break
                case'购物袋':this.$router.push('/cart')
                break
                case'我的':this.$router.push('/home')
                break
            }
        }
    },
}
</script>
<style scoped>
    .nav{
        margin:0;
        padding:0;
        list-style:none;
        display: flex;
        justify-content: space-around;
        position:fixed;
        bottom:0px;
        text-align:center;  
        font-size:14px;
        color:#666; 
        width:100%;
        height:50px;
        background-color:#fff;
        z-index:10;
    }
    .inde{
        width:87%;
        margin-bottom:-35px;
    }
</style>